<template>
  <el-table :data="orders" style="width: 100%; height: 100%; margin-top: 10px">
    <el-table-column prop="id" label="订单编号"></el-table-column>
    <el-table-column prop="product_id" label="商品ID"></el-table-column>
    <el-table-column prop="user_id" label="购买用户ID"></el-table-column>
    <el-table-column prop="status" label="订单状态">
      <template v-slot="scope">
        <el-button type="primary" size="small" @click="editOrder(scope.$index)" plain>{{
          scope.row.status
        }}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="purchase_date" label="购买时间">
      <template v-slot="scope">
        {{ formattedTime(scope.row.purchase_date) }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="收货地"></el-table-column>
    <el-table-column prop="quantity" label="购买数量"></el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 10px"
    v-model:current-page="searchParams.currentPage"
    v-model:page-size="searchParams.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    size="small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(totalItems)"
    @size-change="searchList"
    @current-change="searchList"
  />
  <el-dialog v-model="dialogVisible" title="修改订单状态" :lock-scroll="false">
    <el-form :model="editadrsData" label-width="100px">
      <el-form-item label="订单状态">
        <el-input v-model="editadrsData.status"></el-input>
      </el-form-item>
      <el-form-item>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveOrder()">保存</el-button>
    </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { listApi, statusApi } from '@/api/system/order'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const data = reactive({
      searchParams: {
        currentPage: 1,
        pageSize: 5,
        productName: ''
      },
      dialogVisible: false,
      editadrsData: {},
      totalItems: '',
      orders: []
    })
    const searchList = () => {
      listApi(data.searchParams).then((res) => {
        if (res) {
          data.orders = res.data.data
          data.totalItems = res.data.total
        }
      })
    }
    const saveOrder=()=>{
      statusApi(data.editadrsData).then((res)=>{
        const ids = data.orders.findIndex((a) => a.id === data.editadrsData.id)
        data.orders[ids].status=data.editadrsData.status
          if(res){
            ElMessage({
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        }
      })
        data.dialogVisible = false;
    }
    searchList()
    return {
      ...toRefs(data),
      searchList,
      saveOrder
    }
  },
  methods: {
    formattedTime(Dtime) {
      if (Dtime) {
        const date = new Date(Dtime)
        const options = {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
          second: 'numeric'
        }
        return date.toLocaleDateString('zh-CN', options)
      }
    },
    editOrder(index) {
      this.dialogVisible = true;
      this.editadrsData={...this.orders[index]};
    },
  }
}
</script>

<style lang="scss" scoped></style>
